<template>
  <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto" :infinite-scroll-immediate="false">
    <li v-for="(item, index) in list" class="infinite-list-item" :style="item.fromGender === 2 ? 'text-align: left': 'text-align: right'" >
      <div v-if="item.fromGender === 2 || item.fromGender === 0" class="item-name" style="width: 100%;" :key="index">
          <el-avatar :size="40" :src="item.content" style="margin-top: 15px;">
            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" alt="" />
          </el-avatar>
          <div style="display: inline-block;width: 80%;">
            <span style="display: block; padding-bottom: 6px;">{{ item.fromUser }}</span>
            <span>{{ item.content }} <br></span>
            <span>{{ item.sendTime | formatTime }}</span>
          </div>
      </div>
      <div v-else class="item-name" style="width: 100%;">
        <div style="display: inline-block;width: 70%;">
          <span style="display: block; padding-bottom: 6px;">{{ item.fromUser }}</span>
          <span>{{ item.content }} <br></span>
          <span>{{ item.sendTime | formatTime }}</span>
        </div>
        <el-avatar :size="40" :src="item.content" style="margin-top: 15px;">
          <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" alt="" />
        </el-avatar>
      </div>
    </li>
  </ul>
</template>

<script>
  import { Loading } from 'element-ui';
  import { xhrImmsgList } from '@/api/anchor'
  export default {
    name: "index",
    props: {
      fromUser: {
        type: Number,
        default: null
      },
      toUser: {
        type: Number,
        default: null
      }
    },
    watch: {
      toUser: "create"
    },
    data() {
      return {
        list: [],
        listQuery: {
          userId: this.fromUser,
          secondUserId: this.toUser,
          orderBy: 'asc',
          offset: 0,
          page: 0,
          limit: 20
        },
        send_status: false
      }
    },
    created() {
      this.create()
    },
    methods: {
      create(){
        this.listQuery.offset = 0
        this.listQuery.page = 0
        this.listQuery.limit = 20
        this.list = []
        this.listQuery.userId = this.fromUser
        this.listQuery.secondUserId = this.toUser
        this.doSearch()
      },
      load(){
          this.listQuery.userId = this.fromUser
          this.listQuery.secondUserId = this.toUser
          if (!this.send_status){
            this.doSearch()
          }
        },
      doSearch() {
        this.send_status = true
        this.listQuery.offset = this.listQuery.page * this.listQuery.limit
        xhrImmsgList(this.listQuery)
          .then(resp => {
            for (let i in resp.data.list) {
              this.list.push(resp.data.list[i])
            }
            this.total = resp.data.count
            this.listQuery.page = this.listQuery.page + 1
          })
          .catch(err => {
            this.$message.error(err)
          }).finally(resp => {
            this.send_status = false
        })
        }
      }
    }
</script>

<style scoped>
  .item-name{
  }
  .infinite-list {
    height: 500px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .infinite-list .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f3fe;
    margin: 10px;
    color: #7dbcfc;
  }
</style>
